<template>
  <div>
    <ul>
      <el-row>
        <el-col :span="8">
          <li>
            <img src="../assets/luoli1.png" />
            <div class="img-content">
              <strong class="img-font">这是小萝莉1号</strong>
            </div>
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/luoli2.png" />
            <div class="img-content">
              <strong class="img-font">这是小萝莉2号</strong>
            </div>
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/luoli3.png" />
          </li>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <li>
            <img src="../assets/zhifu1.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/zhifu2.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/zhifu3.png" />
          </li>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <li>
            <img src="../assets/yujie1.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/yujie2.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/yujie3.png" />
          </li>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <li>
            <img src="../assets/nvhan1.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/nvhan2.png" />
          </li>
        </el-col>
        <el-col :span="8">
          <li>
            <img src="../assets/nvhan3.png" />
          </li>
        </el-col>
      </el-row>
    </ul>
    {{title}}
    <!-- <ul style="font-zise：20px">
      <li
        v-for="(item,index) in arr"
        :key="index"
        :class="index === activeIndex ? 'active': ''"
        @click="_handleChange(index)"
      >{{item}}</li>
    </ul>-->
    {{msgFromson}}
    <el-button type="primary" @click="_handleclick('luoli')">萝莉</el-button>
    <el-button type="primary" @click="_handleclick('yujie')">御姐</el-button>
    <el-button @click="add">+1</el-button>
    {{sunData}}
    <el-card>
      <luoli v-show="showName === 'luoli' ? true : false" :msg="sunData" @func="getMsgFromSun" />
      <yuejie v-show="showName === 'yujie' ? true : false" />
    </el-card>
    <!-- 将标题和 内容传到子组件 -->
    <tabs :arr="arr" :arrcontent="content" />
    {{count}}
    <tabsdemo />
    <el-button @click="getList">获取列表</el-button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Tabs from './component/tabs.vue'
import Tabsdemo from './component/tabsdemo.vue'
import Luoli from './xiaojiejie/Luoli.vue'
import Yuejie from './xiaojiejie/Yuejie.vue'
import { goodsList } from '../utils/api'
// 引入子组件
export default {
  components: { Luoli, Yuejie, Tabs, Tabsdemo },
  data() {
    return {
      // arr: ['Luoli', 'Yujie', 'Shunv'],
      title: 'Louli',
      activeIndex: 0,
      showName: 'luoli',
      // 这是传给 子组件的值。
      sunData: 23,
      msgFromson: '',
      arr: ['aa', 'bb', 'cc'],
      content: ['aa content', 'bb content', 'cc content'],
      params: {
        pagenum: 1,
        pagesize: 'sdd'
      }
      // count: ''
    }
  },
  created() {
    // this.getCount()
  },
  methods: {
    _handleChange(item) {
      this.activeIndex = item
      console.log(this.activeIndex)
    },
    _handleclick(name) {
      this.showName = name
    },
    add() {
      this.sunData = this.sunData + 1
    },
    getMsgFromSun(data) {
      this.msgFromson = data
    },
    getCount() {
      this.count = this.$store.state.count
    },
    getList() {
      goodsList(this.params).then((res) => {
        console.log(res)
      })
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>
<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  position: relative;
  list-style: none;
  float: left;
  width: 300px;
  height: 300px;
  img {
    width: 100%;
    height: 100%;
  }
  .img-content {
    position: absolute;
    bottom: 0px;
    width: 300px;
    height: 50px;
    border: 1px solid #eee;
    background-color: black;
    opacity: 0.6;
    text-align: center;
  }
}
.img-font {
  color: yellowgreen;
  opacity: 1 !important;
  font-size: 24px;
}
// ul {
//   float: left;
// }
.el-row:nth-child(1) {
  margin-top: 0px;
}
.el-row {
  margin-top: 20px;
}
.el-col {
  display: flex;
  justify-content: center;
}
</style>
